<template>

  <div style="width:100%;display:flex;">


    <div style="flex-grow: 1; flex-shrink: 0">
      <el-card class="page-h">

        <web-table
          ref="pagingTable"
          :options="options"
          :list-query="listQuery"
          @select-changed="handleSelect"
        >

          <template #filter-content>

            <div style="display: flex">
              <div style="flex-grow: 1">
                <el-input
                  v-model="listQuery.params.title"
                  style="width: 250px"
                  placeholder="搜索题目"
                  prefix-icon="el-icon-search"
                />
              </div>
              <div style="display: flex; align-content: flex-end">

                <el-button type="primary" icon="el-icon-s-promotion" @click="startTrain">
                  开始训练
                </el-button>

                <el-button :disabled="selections.length === 0" type="danger" icon="el-icon-delete" @click="handelDelete">
                  移除
                </el-button>
              </div>
            </div>

          </template>

          <template #data-columns>

            <el-table-column
              label="题目"
              prop="title"
              show-overflow-tooltip
            >

              <template v-slot="scope">
                <detail-link :id="scope.row.id" :title="scope.row.title" @click="showDetail" />
              </template>

            </el-table-column>

            <el-table-column
              label="题型"
              prop="quType_dictText"
              align="center"
              width="100px"
            />

            <el-table-column
              label="错误次数"
              prop="wrongCount"
              align="center"
              width="100px">

              <template v-slot="{ row }">
                <span v-if="row.wrongCount > 0">{{ row.wrongCount }}</span>
                <span v-else>--</span>
              </template>

            </el-table-column>

            <el-table-column
              label="题目"
              prop="title"
              align="center"
              width="120px"
            >

              <template v-slot="{ row }">
                <el-link type="primary" @click="showDetail(row.id)">详情<i class="el-icon-view el-icon--right"/> </el-link>
              </template>

            </el-table-column>

          </template>
        </web-table>

      </el-card>
    </div>

    <div style="width: 300px; padding-left: 20px">
      <el-card class="page-h">
        <div class="h3">最近训练</div>

        <div v-if="latestList.length===0">
          您还没有训练记录！
        </div>


        <div v-for="item in latestList" :key="item.id" class="his-item">
          <div class="flex-bt">
            <div style="flex-grow: 1; color: #000; font-size: 12px; font-weight: 700">{{ item.updateTime }}</div>
            <div>
              <el-link v-if="item.state===0" type="primary" icon="el-icon-video-play" @click="conTrain(item.repoId, item.trainMode)">继续训练</el-link>
              <el-link v-else icon="el-icon-video-play" disabled>训练结束</el-link>
            </div>
          </div>

          <div class="flex-bt">
            <div>
              进度：{{ item.answerCount }}/{{ item.totalCount }}
            </div>
            <div>
              正确率：{{ item.percent }}%
            </div>
          </div>

        </div>


      </el-card>

    </div>

    <book-detail-dialog :id="bookId" :visible.sync="dialogVisible" />

  </div>

</template>

<script>
import { latestTrain } from '@/api/repo/train'
import { deleteQu } from '@/api/client/repo/book'
import BookDetailDialog from '@/views/web/repo/components/BookDetailDialog/index.vue'

export default {
  name: 'BookList',
  components: { BookDetailDialog },
  data() {
    return {

      listQuery: {
        current: 1,
        size: 10,
        params: {
          title: '',
          examId: ''
        }
      },

      options: {
        multi: true,
        // 列表请求URL
        listUrl: '/api/client/book/paging',
        // 无数据查看
        noData: '暂无数据！'
      },

      latestList: [],
      selections: [],

      bookId: null,
      dialogVisible: false
    }
  },
  created() {
    const refId = this.$route.query.refId
    const refType = this.$route.query.refType
    const mark = this.$route.query.mark
    this.listQuery.params.refId = refId
    this.listQuery.params.refType = refType
    this.listQuery.params.mark = mark
    // 最近训练
    this.fetchLatest(refId)

    if (mark === 'wrong') {
      this.options.noData = '没有错题或管理员未开启错题查看！'
    }
    if (mark === 'fav') {
      this.options.noData = '没有数据，快去收藏吧~'
    }
    if (mark === 'note') {
      this.options.noData = '没有数据，做过笔记的题目都会出现在这里哦~'
    }
  },
  methods: {

    fetchLatest(id) {
      latestTrain(id).then(res => {
        this.latestList = res.data.records
      })
    },

    // 移除错题
    handelDelete() {
      const removeFav = this.listQuery.params.mark === 'fav' || null
      const removeNote = this.listQuery.params.mark === 'note' || null

      this.$confirm('确实要将选定的题目从错题中移除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteQu(this.selections, removeFav, removeNote).then(() => {
          this.$message.success('已移除指定的题目！')
          this.$refs.pagingTable.getList()
        })
      })
    },

    startTrain() {
      let trainType = this.listQuery.params.refType

      if (this.listQuery.params.mark === 'fav') {
        trainType = 'repo_fav'
      }

      if (this.listQuery.params.mark === 'note') {
        trainType = 'repo_note'
      }

      // 开始训练
      this.$router.push({ name: 'TrainStart', params: {
        repoId: this.listQuery.params.refId,
        mode: trainType }})
    },

    /**
     * 继续训练
     * @param repoId
     * @param mode
     */
    conTrain(repoId, mode) {
      this.$router.push({ name: 'TrainStart', params: { repoId: repoId, mode: mode }})
    },

    /**
     * 选定操作
     * @param obj
     */
    handleSelect(obj) {
      this.selections = obj.ids
    },

    /**
     * 显示详情
     * @param id
     */
    showDetail(id) {
      this.bookId = id
      this.dialogVisible = true
    }

  }
}
</script>

<style scoped>

  .page-h{
    height: calc(100vh - 130px);
  }

  .his-item{
    background: #efefef;
    padding:5px 10px;
    margin-bottom: 10px;
    color: #888;
    font-size: 14px;
  }

</style>
